<template>
<div class="login_container">
    <vue-particles
      style="height:100%;width:100%"
      class="login-bg"
      color="#39AFFD"
      :particleOpacity="0.8"
      :particlesNumber="150"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
></vue-particles>
    <div class="login_box">
        <h2>亲！请登录</h2>
    <!-- 登陆表单区域 -->
    <el-form ref="loginFormRef" :model="loginForm" :rules="LoginformRules"   label-width="0px" class="login_form">
        <!-- 用戶名 -->
      <el-form-item prop="id" label="Username" class="clickPostion">
         <el-input  prefix-icon="el-icon-user"  v-model="loginForm.id" placeholder="请输入账号">
         </el-input>
      </el-form-item>
      <!-- 密碼 -->
        <el-form-item prop="user_password" label="Password" class="clickPostion">
         <el-input  prefix-icon="el-icon-lock"  v-model="loginForm.user_password" show-password placeholder="请输入密码"></el-input>
        
      </el-form-item>
      <!-- 按鈕 -->
        <el-form-item  class="btns">
         <el-button type="primary" @click="login">登录</el-button>
         <el-button type="primary" @click="register">注册</el-button>
      </el-form-item>
    </el-form>
    </div>
</div>
</template>

<script>
import Cookies from 'js-cookie'
const axios = require('axios');
export default {
    data() {
        let validPassword=(rule,value,callback)=>{
      let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
      if(!reg.test(value)){callback(new Error('密码必须是由4-20位字母+数字组合'))
      }else{
          callback()
      }
  }
        return {
            loginForm:{
                id:'',
                user_password:''
            },
        LoginformRules:{
        // 验证用户名是否合法
        id: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
                { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
        //   {
        //     pattern: /^[a-zA-Z]+$/,  //正则
        //       message: '用户名只能为英文',
        //     trigger: 'blur'
        //  }
        ],
        // 验证密码是否合法
       user_password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { validator: validPassword, trigger: 'blur' }
        ]

    }
        }
    },
    methods:{
        login() {
            var obj = this.loginForm;
            // var objs=JSON.stringify(obj);
            axios({
                method: 'post',
                url: '/login',
                 dataType: 'json',
                data:obj
            }).then(resp => {
                console.log(resp)
                // this.$message({
                //     message: resp.data,
                //     type:'success'
                // })
                if (resp.data === 0) {
                var token = resp.data.token;
                    window.localStorage.setItem("token", token);
                    Cookies.set('id', this.loginForm.id)
                    Cookies.set('user_password', this.loginForm.user_password)
                    console.log(this.loginForm.id)
                window.localStorage.setItem("token",token);
                    this.$message({
                        message: '登录成功',
                        type: 'success'
                    });
                     this.$router.push({
                    //path后面跟跳转的路由地址
                      path: '/Start',
                     //name后面跟跳转的路由名字（必须有亲测，不使用命名路由会传参失败）
                    name: 'Start',
                     })
                }
                else if (resp.data === 2)
                { 
                    this.$message({
                        message: '用户名不存在',
                        type: 'warning'
                    });
                }
                else if(resp.data===1) {
                    this.$message.error('密码错误！');
                }
                    

            })
            console.log(obj);
           
        },
        register() {
             this.$router.replace('/Register')
        },
        
    }
   
}
</script>
<style>
*{
    margin:0;
    padding:0;
}
.login_container{
    height: 100vh;
    width: 100%;
    background-image: url("../../assets/background.jpg");
    background-repeat: no-repeat;
    background-size:cover;
}
.login_box{
    width: 450px;
    height: 300px;
    background-color: rgba(22, 22, 23, 0.2);
    border-radius:10px;
    position: absolute;
    box-shadow: 0 0 25px 10px rgba(200, 205, 233, 0.3) ;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.login_form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    /* // 元素指定宽度和高度包括了 padding 和 border  */
    box-sizing: border-box;

}
.btns{
    display: flex;
    justify-content: center;
}
h2{
    text-align: center;
    padding-top:10px;
    color:rgb(217, 231, 244);
    /* color:black; */
}
.el-input .el-input__inner {
    background-color: rgba(233, 232, 239, 0.2);
    border:0;
    color:aliceblue;
}
.clickPostion .el-form-item__label {
color: aliceblue;
}
.login-bg{
width: 50%;
height: 50%;
} 
</style>
